  <template>
  <div class="menu menuss">
    <div class="menu-list">
      <div style="display:flex;align-items:center;">
        <img class="logo" src="../../static/img/logo1.jpg" />
        <img src="../../static/img/location.png" alt style="margin-left:25px;" />
        <!-- <el-popover placement="bottom" trigger="manual" v-model="visible">
          <div>
            <div style="text-align:right">
              <el-button class="changeAddr" @click="qiehuan">切换</el-button>
            </div>
            <div>
              <v-distpicker
                ref="address"
                :province="provinceG"
                :city="cityG"
                area
                @province="onProvince"
                @city="onCity"
              ></v-distpicker>
            </div>
          </div>
          <span
            slot="reference"
            style="cursor:pointer;"
            @click="visible = !visible"
          >{{provinceG | filterStr}}</span>
        </el-popover> -->
        <div class="titSelect"><el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select></div>
        <div style="margin-left: 23px;">
          <div class="inputBox">
            <input type="text" placeholder="开店就找店掌柜"/>
            <div class="selectBtn" @click="$router.push('/findshop')">
              <img src="../../static/img/sousuo.png"/>
            </div>
          </div>
          <div class="selectTip">大家都在搜：
            <a href="#/shangpu" @click.prevent="$router.push('/shangpu')">商铺出租</a>
            <a href="#/findshop" @click.prevent="$router.push('/findshop')">商铺租赁</a>
          </div>
        </div>

        <!--<el-menu-->
          <!--:default-active="activeIndex"-->
          <!--class="el-menu-demo"-->
          <!--mode="horizontal"-->
          <!--@select="handleSelect"-->
        <!--&gt;-->
          <!--<el-menu-item index="/home">首页</el-menu-item>-->
          <!--<el-menu-item index="/findshop">生意转让</el-menu-item>-->
          <!--<el-menu-item index="/shangpu">商铺出租</el-menu-item>-->
        <!--</el-menu>-->
      </div>
      <div style="font-size:14px;font-family:Microsoft YaHei;font-weight:400; color:#000;">
        <p>9：00-18：00 &nbsp;&nbsp;&nbsp;&nbsp;客服电话：13764690791</p>
      </div>
      <!--<div class="login" @click="$router.push('/login')" v-if="accountShow">登录</div>-->
      <!--<div class="login" @click="$router.push('/myshop')" v-else>{{upUser.nick}}</div>-->
    </div>
  </div>
</template>

<script>
import VDistpicker from "v-distpicker";
export default {
  data() {
    return {
      options: [
        {
          value: "上海市",
          label: "上海市"
        }
      ],
      optionArr:["黄浦区","徐汇区",
      "长宁区","静安区","普陀区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","奉贤区","崇明区"],
      value: "上海市",
      visible: false,
      prov: null,
      city: null
    };
  },
  components: {
    VDistpicker
  },
  filters: {
    filterStr(str) {
      if (!!str && str.length > 3) {
        return str.substring(0, 3) + "..";
      }
      return str;
    }
  },
  computed: {
    provinceG() {
      return this.$store.state.provinceG;
    },
    cityG() {
      return this.$store.state.cityG;
    },
    accountShow() {
      return this.$store.state.loginBtn;
    },
    activeIndex() {
      return this.$store.state.activeIndex;
    },
    upUser() {
      return this.$store.state.userInfo;
    }
  },
  mounted() {
    if (this.$route.params.name == "1") {
      this.$store.state.activeIndex = "/findshop";
    } else if (this.$route.params.name == "2") {
      this.$store.state.activeIndex = "/shangpu";
    } else {
      this.$store.state.activeIndex = "/" + this.$route.name;
    }
    this.checkLogin();
  },
  methods: {
    onProvince(data) {
      this.prov = data.value;
    },
    onCity(data) {
      this.city = data.value;
    },
    qiehuan() {
      if (this.prov == null) {
        this.$store.state.provinceG = "上海市";
        sessionStorage.setItem("provinceG", "上海市");
      } else {
        this.$store.state.provinceG = this.prov;
        sessionStorage.setItem("provinceG", this.prov);
      }
      if (this.city == null) {
        this.$store.state.cityG = "上海城区";
        sessionStorage.setItem("cityG", "上海城区");
      } else {
        this.$store.state.cityG = this.city;
        sessionStorage.setItem("cityG", this.city);
      }

      this.visible = false;
      if (this.$refs.address.$data.areas.length < 1) {
        this.$set(this.$store.state, "areas", this.$refs.address.$data.cities);
      } else {
        this.$set(this.$store.state, "areas", this.$refs.address.$data.areas);
      }

    },
    checkLogin() {
      let userInfo = {};
      userInfo.userId = sessionStorage.getItem("userId");
      userInfo.nick = sessionStorage.getItem("nick");
      userInfo.account = sessionStorage.getItem("account");
      userInfo.facePath = sessionStorage.getItem("facePath");
      this.$store.commit("upUserInfo", userInfo);
      if (sessionStorage.getItem("account")) {
        this.$set(this.$store.state, "loginBtn", false);
      } else {
        this.$set(this.$store.state, "loginBtn", true);
      }
      // if (sessionStorage.getItem("provinceG")) {
      //   this.$store.state.provinceG = sessionStorage.getItem("provinceG");
      // }
      // if (sessionStorage.getItem("cityG")) {
      //   this.$store.state.cityG = sessionStorage.getItem("cityG");
      // }
      this.$nextTick(() => {
      //   if (this.$refs.address.$data.areas.length < 1) {
      //     this.$set(
      //       this.$store.state,
      //       "areas",
      //       this.$refs.address.$data.cities
      //     );
      //   } else {
      //     this.$set(this.$store.state, "areas", this.$refs.address.$data.areas);
      //   }
      this.$set(this.$store.state, "areas",this.optionArr)
      });

    },
    handleSelect(e) {
      this.$router.push(e);
    }
  }
};
</script>
<style scoped lang="less">
.changeAddr {
  background: #ff5001;
  color: #fff;
  border: 0;
  margin: 8px 0 10px 0;
}
.menu {
  min-width: 1200px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  height: 80px;
  padding: 0 60px 0 20px;
  color: #000;
  &-list {
    display: flex;
    align-items: center;
    width: 1200px;
    margin: 0 auto;
    justify-content: space-between;
  }

  .logo {
    width: 130px;
    height: 44px;
  }
}
.login {
  color: #ff5001;
  font-size: 18px;
  cursor: pointer;
}
.menu-right {
  display: flex;
  font-size: 16px;
  align-items: center;
  span {
    font-size: 30px;
    margin: 0 20px;
    color: #fff;
  }
}

.menuTit,
.menuTx,
.out {
  cursor: pointer;
}

.menuTit {
  width: 120px;
  line-height: 60px;
  background: #1890ff;
  justify-content: center;
  margin-right: 20px;
  display: flex;
  align-items: center;

  div {
    margin-right: 5px;
    height: 20px;
    font-size: 18px;
    width: 20px;
    line-height: 20px;
  }
}

.menuTx {
  height: 100%;
  display: flex;
  align-items: center;
  margin: 0 10px;
  color: #fff;

  img {
    border-radius: 45px;
    margin-right: 10px;
    width: 45px;
    height: 45px;
  }
}
.inputBox{

  input{
    width:360px;
    height:36px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(228,30,29,1);
    font-size:14px;
    font-weight:400;
    color:#000;
    float: left;
    padding-left: 9px;
    outline: none;
  }
  .selectBtn{
    width:80px;
    height:36px;
    background:rgba(228,30,29,1);
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
.selectTip{
  height: 30px;
  text-align: left;
  padding-left: 20px;
  color:#000;
  a{
    text-decoration: none;
    color: #000;
    margin-left: 15px;
  }
}
.el-menu-demo {
  width: auto;
  margin-left: 20px;
}

.el-menu-item {
  font-size: 18px;
  width: 12vw;
  margin: 0 2vw !important;
}

.el-menu.el-menu--horizontal {
  background: #fff;
}

.el-menu.el-menu--horizontal {
  border-bottom: 0;
}

.el-menu--horizontal > .el-menu-item.is-active {
  color: #fff;
  background: #ff5001;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  color: #fff;
}

.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background: #ff5001;
}

.el-menu--horizontal > .el-menu-item {
  color: #000;
  border: 0;
}
/deep/ .titSelect .el-select .el-input__inner{
  border: 0;
  padding: 0;
  background: #ffffff;
  color:#000;
}
</style>
